// Create the canvas

var canvas = document.createElement("canvas");

var ctx = canvas.getContext("2d");

canvas.width = 512;

canvas.height = 480;

document.body.appendChild(canvas);
// Background image

var bgReady = false;

var bgImage = new Image();

bgImage.onload = function() {

	bgReady = true;

};

bgImage.src = "images/background.png";
// Hero image

var heroReady = false;

var heroImage = new Image();

heroImage.onload = function() {

	heroReady = true;

};

heroImage.src = "images/riv.png";
// Monster image

var monsterReady = false;

var monsterImage = new Image();

monsterImage.onload = function() {

	monsterReady = true;

};

monsterImage.src = "images/pam.png";
// Game objects
//Add under monster image

// Chomp sound

var snd = new Audio("audio/bell.wav");

var hero = {
	speed : 256, // movement in pixels per second

	x : 0,
	y : 0

};

var monster = {
	x : 0,
	y : 0
};

var monstersCaught = 0;

// Handle keyboard controls

var keysDown = {};

addEventListener("keydown", function(e) {
	keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function(e) {
	delete keysDown[e.keyCode];
}, false);

// Reset the game when the player catches a monster

var start = true;

var reset = function() {

	if (start) {

		hero.x = canvas.width / 2;

		hero.y = canvas.height / 2;

		start = false;

	}

	// Throw the monster somewhere on the screen randomly

	monster.x = (Math.random() * (11+380));

	monster.y = (Math.random() * (24+370));
	if (snd.currentTime > 0) {

		snd.currentTime = 0;

		//this is to make sure the sound resets if it is still playing

	}

	snd.play();
};

// Update game objects

var update = function(modifier) {

	if (38 in keysDown) {// Player holding up

		hero.y = (hero.y > 0) ? (hero.y - hero.speed * modifier) : canvas.height - 32;
		if (hero.y <=24){hero.y=25}

	}

	if (40 in keysDown) {// Player holding down

		hero.y = (hero.y + hero.speed * modifier) % canvas.height;
		if (hero.y >=390){hero.y=391}

	}

	if (37 in keysDown) {// Player holding left

		hero.x = (hero.x > 0) ? (hero.x - hero.speed * modifier) : canvas.width - 32;
		if (hero.x <=11){hero.x=10}
		

	}

	if (39 in keysDown) {// Player holding right

		hero.x = (hero.x + hero.speed * modifier) % canvas.width;
		if (hero.x >=399){hero.x=400}

	}

	// Are they touching?

	if (hero.x <= (monster.x + 50) && monster.x <= (hero.x + 50) && hero.y <= (monster.y + 50) && monster.y <= (hero.y + 50)) {++monstersCaught;

		reset();
	
	}
};

// Draw everything

var render = function() {

	if (bgReady) {

		ctx.drawImage(bgImage, 0, 0);
	}

	if (heroReady) {

		ctx.drawImage(heroImage, hero.x, hero.y);
	}

	if (monsterReady) {

		ctx.drawImage(monsterImage, monster.x, monster.y);
	}

	// Score

	ctx.fillStyle = "rgb(255, 255, 0)";

	ctx.font = "24px Helvetica";

	ctx.textAlign = "left";

	ctx.textBaseline = "top";

	ctx.fillText("Goblins caught: " + monstersCaught, 285, 32);

};

// The main game loop

var main = function() {

	var now = Date.now();

	var delta = now - then;

	update(delta / 1000);
	render();
	then = now;

};
// Let's play this game!

reset();

var then = Date.now();

setInterval(main, 1);
// Execute as fast as possible